<template>
	<view class="wpprs">
		<view class="roi">
			<view>处理结果</view>
			<view @click="flag = true">
				<image src="../../static/images/iconSolved.png" v-if="flag"></image>
				<image src="../../static/images/iconUnsolve.png" v-if="!flag"></image>
				{{ '&nbsp;&nbsp;已解决' }}
			</view>
			<view @click="flag = false">
				<image src="../../static/images/iconSolved.png" v-if="!flag"></image>
				<image src="../../static/images/iconUnsolve.png" v-if="flag"></image>
				{{ '&nbsp;&nbsp;未解决' }}
			</view>
		</view>
		<view class="iptbox">
			<view>处理说明</view>
			<input type="text" v-model="explain" placeholder="请输入处理说明" />
		</view>
		<view class="timer" v-if="!flag">
			<view class="list b">
				<view class="l">上门日期</view>
				<view class="r" @click="datetime">{{ single ? single : '选择上门日期' }}{{ '>' }}</view>
			</view>
			<view class="list">
				<view class="l">上门时段</view>
				<view class="r"><uni-data-select class="timerLine" v-model="timerLine" :localdata="range" @change="timerchange"></uni-data-select></view>
			</view>
		</view>
		<view class="timer" v-if="!flag">
			<view class="list b">
				<view class="l">是否收费</view>
				<view class="r"><switch color="red" style="transform: scale(0.7)" @change="switch2Change" /></view>
			</view>
			<view class="list b">
				<view class="l">预计收费金额</view>
				<input class="r" v-model="amount" type="number" placeholder="请输入收费金额" />
			</view>
			<view class="list">
				<view class="l">备注信息</view>
				<input class="r" v-model="remark" type="text" placeholder="请输入备注信息" />
			</view>
		</view>
		<view class="submit" @click="phoneReport">确定</view>
		<view class="datetime"><uni-datetime-picker ref="datetime" type="date" :clear-icon="false" v-model="single" /></view>
	</view>
</template>

<script>
import { phoneReport } from '../../api/order';

export default {
	name: 'telephone',
	data() {
		return {
			flag: true,
			isCharge: true,
			explain: '',
			amount: '',
			remark: '',
			orderId: null,
			single: null,
			timerLine: '',
			range: [
				{ value: '07:00~09:00', text: '07:00~09:00' },
				{ value: '09:00~11:00', text: '09:00~11:00' },
				{ value: '11:00~13:00', text: '11:00~13:00' },
				{ value: '13:00~15:00', text: '13:00~15:00' },
				{ value: '15:00~17:00', text: '15:00~17:00' }
			]
		};
	},
	onLoad(e) {
		this.orderId = e.id;
	},
	methods: {
		switch2Change(val) {
			this.isCharge = val.detail.value;
			console.log(val.detail.value);
		},
		timerchange(val) {
			console.log(val);
		},
		datetime() {
			this.$refs.datetime.show();
		},
		phoneReport() {
			if (this.explain == '') {
				uni.showToast({
					title: '处理说明不能为空',
					duration: 2000
				});
				return;
			}
			if (this.flag) {
				phoneReport({
					workOrderId: this.orderId,
					result: this.flag ? 1 : 2,
					explain: this.explain
				}).then((data) => {
					uni.navigateBack({ delta: 1 });
				});
			} else {
				if (!this.single) {
					uni.showToast({
						title: '上门日期不能为空',
						duration: 2000
					});
					return;
				}
				if (this.timerLine == '') {
					uni.showToast({
						title: '上门时段不能为空',
						duration: 2000
					});
					return;
				}
				if (isCharge) {
					if (this.amount == '') {
						uni.showToast({
							title: '收费金额不能为空',
							duration: 2000
						});
						return;
					}
				}

				phoneReport({
					expectDate: this.single + ' 00:00:00',
					isCharge: this.isCharge,
					workOrderId: this.orderId,
					amount: this.amount,
					remark: this.remark,
					expectStartDate: this.single + `${' '}${this.timerLine.split('~')[0]}:00`,
					expectEndDate: this.single + `${' '}${this.timerLine.split('~')[1]}:00`,
					result: this.flag ? 1 : 2,
					explain: this.explain
				}).then((data) => {
					uni.navigateBack({ delta: 1 });
				});
			}
		}
	}
};
</script>

<style scoped lang="less">
.wpprs {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-image: url('https://junminyiqi.oss-cn-shanghai.aliyuncs.com/flies/d29eccf2-f7be-dbc8-4853-e3b19055825b.png');
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 30upx;
	box-sizing: border-box;
	background-color: #f1f1f1;
	.datetime {
		width: 0;
		height: 0;
		overflow: hidden;
	}
	.timer {
		background-color: #fff;
		border-radius: 10upx;
		margin-top: 30upx;
		.list {
			display: flex;
			padding: 20upx;
			&.b {
				border-bottom: 1px #ccc solid;
			}
			.l {
				width: 280upx;
			}
			.r {
				width: 100%;
				text-align: right;
				height: 46upx;
				/deep/.uni-stat__select {
					transform: translateY(-10upx);
				}
				/deep/.uni-select {
					border: none;
				}
				/deep/.uni-select__input-placeholder {
					color: #000;
					font-size: 32upx;
				}
			}
		}
	}
	.roi {
		padding: 20upx 0;
		text-align: center;
		background: #fff;
		border-radius: 10upx;
		& > view {
			width: 33%;
			display: inline-block;
		}
		image {
			width: 20upx;
			height: 20upx;
			display: inline-block;
		}
	}
	.iptbox {
		margin-top: 30upx;
		background: #fff;
		border-radius: 10upx;
		padding: 20upx;
		input {
			padding: 20px;
		}
	}
	.submit {
		margin-top: 30upx;
		padding: 26upx;
		background: red;
		border-radius: 60upx;
		text-align: center;
		color: #fff;
	}
}
</style>
